<template>
    <a-card :bordered="false">

        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">

                    <a-col :md="6" :sm="12">
                        <a-form-item label="表名">
                            <a-input placeholder="请输入表名查询" v-model="queryParam.tableName"></a-input>
                        </a-form-item>
                    </a-col>

                    <a-col :md="6" :sm="8">
                        <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                          <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                        </span>
                    </a-col>

                </a-row>
            </a-form>
        </div>

        <!-- 操作按钮区域 -->
        <div class="table-operator" style="border-top: 5px">
            <a-button type="primary" icon="download" @click="handleExportXls('用户信息')">导出</a-button>
        </div>

        <!-- table区域-begin -->
        <div>
            <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
                <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
                <a style="margin-left: 24px" @click="onClearSelected">清空</a>
                <div style="display: inline-block;margin-left: 20px">
                    <a-button v-if="selectedRowKeys.length>0" type="primary">批量生成</a-button>
                </div>
            </div>

            <a-table
                    ref="table"
                    bordered
                    size="middle"
                    rowKey="name"
                    :columns="columns"
                    :dataSource="dataSource"
                    :pagination="ipagination"
                    :loading="loading"
                    :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                    @change="handleTableChange">

                <span slot="action" slot-scope="text, record">
                  <a @click="fnShowColumn(record)">详细</a>
                    <a-divider type="vertical"/>
                  <a-dropdown>
                    <a class="ant-dropdown-link">
                      更多 <a-icon type="down"/>
                    </a>
                    <a-menu slot="overlay">
                      <a-menu-item>
                        <a href="javascript:;" @click="fnToGenerateConfig(record)">生成配置</a>
                      </a-menu-item>
                    </a-menu>
                  </a-dropdown>
                </span>

            </a-table>
        </div>
        <!-- table区域-end -->

        <table-modal ref="tableModal"/>
        <select-type-mapper-modal ref="selectTypeMapperModal"/>

    </a-card>
</template>

<script>
import tableModal from './part/TableModal'
import { filterObj } from '@/utils/util';
import { postAction } from "@/api/manage";
import selectTypeMapperModal from "./part/SelectTypeMapperModal";
export default {
  name: "TableList",
  components: {
    tableModal,
    selectTypeMapperModal
  },
  data() {
    return {
      description: '这是用户管理页面',
      queryParam: {},
      columns: [
        {
          title: '表名', align: "center", dataIndex: 'name', width: 120, sorter: true },
        {
          title: '注释',
          align: "center",
          width: 100,
          dataIndex: 'comment'
        },
        {
          title: '命名空间',
          align: "center",
          width: 120,
          dataIndex: 'namespace'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: "center",
          width: 170
        }

      ],
      dataSource: [],
      /* 排序参数 */
      isorter: {
        column: 'createTime',
        order: 'desc'
      },
      /* 筛选参数 */
      filters: {},
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      loading: false,
      /* table选中keys*/
      selectedRowKeys: [],
      /* table选中records*/
      selectionRows: [],
      url: {
        baseUrl: "/codeGenerator/codeGenerator/schema/"
      }
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    getQueryParams() {
      //获取查询条件
      let sqp = {}
      var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters);
      param.pageNum = this.ipagination.current;
      param.pageSize = this.ipagination.pageSize;
      return filterObj(param);
    },
    loadData(arg) {
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      var params = this.getQueryParams();//查询条件
      this.loading = true;
      postAction(this.url.baseUrl + 'queryTables', params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records;
          this.ipagination.total = res.result.total;
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false;
      })
    },
    searchQuery() {

    },
    handleExportXls() {
      console.log('导出')
    },
    onClearSelected() {
      this.selectedRowKeys = [];
      this.selectionRows = [];
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = sorter.order == "ascend" ? "asc" : "desc"
      }
      this.ipagination = pagination;
      this.loadData();
    },
    //展示表格列
    fnShowColumn(record) {
      this.$refs.tableModal.showTableColumn(record)
    },
    fnToGenerateConfig(record) {
      this.$refs.selectTypeMapperModal.visible = true
      this.$nextTick(() => {
        this.$refs.selectTypeMapperModal.record = record
      })
    }
  }

}
</script>
<style scoped>
    @import '~@assets/less/common.less'
</style>
